<template>
    <div class="wrapper" :class="{hideSidebar:!isMenuShowGetter}">
        <div class="sidebar-wrapper">
            <v-sidebar class="sidebar-container"></v-sidebar>
        </div>
        <!--<v-mini-menu></v-mini-menu>-->
        <div class="content" :class="{ whenHideMenu : !isMenuShowGetter }">
            <v-head></v-head>
            <div class="content-wrapper">
                <transition name="move" mode="out-in"><keep-alive><router-view></router-view></keep-alive></transition>
            </div>
        </div>
        <el-dialog :title="$t('home.userData')" :show-close="false" size="tiny" :visible.sync="isPersonalDataShowGetter">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane :label="$t('home.personalData')" name="first">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
                        <el-form-item :label="$t('allTable.username')">
                            <p>{{ruleForm.username}}</p>
                        </el-form-item>
                        <el-form-item :label="$t('allTable.realName')" prop="realName">
                            <el-input v-model="ruleForm.realName" :readonly="readonly" style="width: 220px;"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('allTable.mobile')" prop="mobile">
                            <el-input v-model="ruleForm.mobile" :readonly="readonly" style="width: 220px;"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('allTable.email')" prop="email">
                            <el-input v-model="ruleForm.email" :readonly="readonly" style="width: 220px;"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="closeDialog">{{readonly? $t('allTable.close'): $t('allTable.cancel')}}</el-button>
                            <el-button @click="editUserData" type="primary" v-if="!readonly">{{$t('allTable.confirm')}}</el-button>
                            <el-button @click="readonly = false" type="primary" v-if="readonly">{{$t('allTable.edit')}}</el-button>
                        </el-form-item>
                    </el-form>

                </el-tab-pane>
                <el-tab-pane :label="$t('home.modifyPassword')" name="second">
                    <el-form :model="passwordForm" :rules="rules" ref="passwordForm" label-width="150px">
                        <el-form-item :label="$t('home.oldPassword')" prop="oldPassword">
                            <el-input type="password" v-model="passwordForm.oldPassword" style="width: 220px;"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('home.newPassword')" prop="newPassword">
                            <el-input type="password" v-model="passwordForm.newPassword" style="width: 220px;"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('home.repeatNewPassword')" prop="repeatNewPassword">
                            <el-input type="password" v-model="passwordForm.repeatNewPassword" style="width: 220px;"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="changePersonalDataShow(false);">{{$t('allTable.close')}}</el-button>
                            <el-button @click="modifyPassword('passwordForm');" type="primary">{{$t('allTable.modify')}}</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
    import vHead from './header.vue';
    import vSidebar from './sidebar.vue';
    import vMiniMenu from './miniMenu.vue';
    import { mapGetters,mapMutations } from 'vuex';
    import common from '../../assets/script/common';
    import { isPhoneNum,isEmail } from '../../assets/script/validate';
    export default {
        components:{
            vHead, vSidebar, vMiniMenu
        },
        data() {
            const validateOldPassword = (rule, value, callback) => {
                if (this.passwordForm.oldPassword !== this.$store.state.login.validatePassword) {
                    callback(new Error(this.$i18n.t('home.oldPasswordError')));
                } else {
                    callback();
                }
            };
            const validatePassword = (rule, value, callback) => {
                if (this.passwordForm.repeatNewPassword !== this.passwordForm.newPassword) {
                    callback(new Error(this.$i18n.t('home.passwordError')));
                } else {
                    callback();
                }
            };
            const validatePhoneNum = (rule, value, callback) => {
                if (!isPhoneNum(value)) {
                    callback(new Error(this.$i18n.t('home.telephoneError')));
                } else {
                    callback();
                }
            };
            const validateEmail = (rule, value, callback) => {
                if (!isEmail(value)) {
                    callback(new Error(this.$i18n.t('home.emailError')));
                } else {
                    callback();
                }
            };
            return {
                activeName:'first',
                readonly:true,
                ruleForm: {
                    id:'',
                    description: '',
                    username: '',
                    password: '',
                    realName:'',
                    createDate:'',
                    modifyDate:'',
                    status:'',
                    email:'',
                    mobile:''
                },
                passwordForm: {
                    oldPassword: '',
                    newPassword: '',
                    repeatNewPassword: ''
                },
                rules: {
                    username: [
                        { required: true, message: this.$i18n.t('allTable.pleaseInput',{ name: this.$i18n.t('allTable.username') }), trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: this.$i18n.t('allTable.pleaseInput',{ name: this.$i18n.t('allTable.password') }), trigger: 'blur' }
                    ],
                    oldPassword: [
                        { required: true, message: this.$i18n.t('allTable.pleaseInput',{ name: this.$i18n.t('allTable.password') }), trigger: 'blur' },
                        { required: true, trigger: 'blur', validator: validateOldPassword }
                    ],
                    newPassword: [
                        { required: true, message: this.$i18n.t('allTable.pleaseInput',{ name: this.$i18n.t('allTable.password') }), trigger: 'blur' }
                    ],
                    repeatNewPassword: [
                        { required: true, message: this.$i18n.t('allTable.pleaseInput',{ name: this.$i18n.t('allTable.password') }), trigger: 'blur' },
                        { required: true, trigger: 'blur', validator: validatePassword }
                    ],
                    mobile: [
                        { required: true, message: this.$i18n.t('allTable.pleaseInput',{ name: this.$i18n.t('allTable.telephone') }), trigger: 'change' },
                        { required: true, trigger: 'change', validator: validatePhoneNum }
                    ],
                    email: [
                        { required: true, message: this.$i18n.t('allTable.pleaseInput',{ name: this.$i18n.t('allTable.email') }), trigger: 'change' },
                        { required: true, trigger: 'change' , validator: validateEmail}
                    ],
                    realName: [
                        { required: true, message: this.$i18n.t('allTable.pleaseInput',{ name: this.$i18n.t('allTable.realName') }), trigger: 'change' }
                    ],
                    description: [
                        { required: true, message: this.$i18n.t('allTable.pleaseInput',{ name: this.$i18n.t('allTable.description') }), trigger: 'blur' }
                    ]
                }
            }
        },
        created() {
            this.loadUserData();
        },
        computed:{
            ...mapGetters([
                'isMenuShowGetter',
                'isPersonalDataShowGetter'
            ])
        },
        methods:{
            ...mapMutations([
                'changePersonalDataShow',
                'changeMenuShow'
            ]),
            onShowMenu() {
                let isMenuShow = !this.$store.state.menu.isMenuShow;
                this.changeMenuShow(isMenuShow);
            },
            closeDialog() {
                let self = this;
                if(self.readonly){
                    self.changePersonalDataShow(false);
                }else{
                    self.ruleForm = JSON.parse(sessionStorage.getItem('oldUserData'));
                    self.readonly = true;
                }
            },
            editUserData() {
                let self = this;
                common.putTableList(self,'profile',self.ruleForm,() => {
                    self.readonly = true;
                    self.loadUserData();
                });
            },
            loadUserData() {
                let self = this;
                let __token = sessionStorage.getItem("token");
                self.$axios.get('/admin/mscUser/load',{
                    headers: {
                        'X-Authorization': 'Bearer '+__token
                    },
                    validateStatus:function(status){
                        return status >= 200 && status <500;//default
                    }
                }).then((res) => {

                    if(res.data.status === 401){
                        common.refreshToken(self, (token) => {
                            sessionStorage.setItem("token",token);
                            self.loadUserData();
                        });
                    }else{
                        self.ruleForm=res.data;
                        sessionStorage.setItem('oldUserData',JSON.stringify(res.data));
                    }
                });
            },
            modifyPassword(formName) {
                let self = this;
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        common.putTableList(self, 'reset', self.passwordForm, (data) => {
                            if(data) {
                                self.activeName='first';
                                self.changePersonalDataShow(false);
                                self.$alert(self.$i18n.t('home.passwordChange'), '', {
                                     confirmButtonText: self.$i18n.t('home.confirm'),
                                     callback: action => {
                                        self.$router.push('/login');
                                     }
                                 });
                            }else{
                                self.$message.error('密码修改失败');
                            }
                        });
                    }
                });
            }
        }
    }
</script>
<style lang="stylus">
    .hideSidebar {
        .sidebar-wrapper {
            transform: translate(-214px, 0);
            .sidebar-container {
                transform: translate(204px, 0);
            }
            &:hover {
                transform: translate(0, 0);
                .sidebar-container {
                    transform: translate(0, 0);
                }
            }
        }
        .main-container{
            margin-left: 40px;
        }
    }
    .sidebar-wrapper {
        width: 250px;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 100;
        overflow-x: hidden;
        transition: all .28s ease-out;
        background: #324157;
        &::-webkit-scrollbar-track-piece {
            background: #d3dce6;
        }
        &::-webkit-scrollbar {
            width: 6px;
        }
        &::-webkit-scrollbar-thumb {
            background: #99a9bf;
            border-radius: 20px;
        }
    }
    .content
        background none repeat scroll 0 0 #fff
        position absolute
        left 250px
        right 0
        top 0
        bottom 0
        width auto
        box-sizing border-box
        overflow auto
        transition: all .28s ease-out;
        .content-wrapper
            padding 18px 20px 20px 20px
        .menuBtn
            display flex
            align-items center
            justify-content center
            height 24px
            width 24px
            cursor pointer
            position absolute
            left 0
            top 0
            z-index 1
            border-radius 5px
            >i
                font-size 12px
                color #BFCBD9
        &.whenHideMenu
            left 36px
</style>
